<template>
  <div class="problemDialog" v-if="videoDialog">
    <div class="dialogTitle">
      <div>现场监控</div>
      <img src="@/assets/index/关  闭.png" alt="" @click="closeHiddenTrouble" />
    </div>
    <div class="videoBox">
      <div class="leftBox">
        <video id="videoElement2" controls muted></video>
      </div>
      <div class="rightBox">
        <div
          class="videoList"
          v-for="(item, index) in videoList"
          :key="index.deviceSerial"
        >
          <div
            :class="activeItem === item.deviceSerial ? 'activeItem' : ''"
            class="videoItem"
            @click="seeItem(item, index)"
          >
            {{ item.deviceName }}
          </div>
        </div>
        <div class="pageBox">
          <el-pagination
            small
            :pager-count="5"
            background
            layout="prev, pager, next"
            :total="videoTotal"
            :current-page="this.pageParams.pageNum"
            :page-size="this.pageParams.pageSize"
            @current-change="currentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import flvjs from 'flv.js' // 引入flv.js
let flvPlayer2 = null // 将 flvPlayer 存储在外部以便全局控制
import { liveUrlApi, ysPageListApi } from '@/api/index'

export default {
  name: 'hiddenTrouble',
  props: {
    videoDialog: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      videoList: [],
      activeItem: 0,
      videoTotal: null,
      pageParams: {
        pageNum: 1,
        pageSize: 9,
      },
    }
  },
  created() {
    // this.getVideoList()
  },
  methods: {
    closeHiddenTrouble() {
      if (flvPlayer2) {
        flvPlayer2.destroy()
        flvPlayer2 = null
      }
      this.$emit('update:videoDialog', false)
    },
    async getVideo(id) {
      const res = await liveUrlApi({
        deviceSerial: id,
        protocol: 4,
      })

      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement2')
        flvPlayer2 = flvjs.createPlayer({
          type: 'flv', // 播放类型
          url: res.data.url, // FLV 流地址
          isLive: true, // 是否为直播流（如果是点播则设为 false）
        })
        flvPlayer2.attachMediaElement(videoElement)
        flvPlayer2.load() // 加载视频
        try {
          await flvPlayer2.play()
        } catch (err) {
          console.error('自动播放失败:', err)
        }
      } else {
        console.error('当前浏览器不支持 flv.js')
      }
    },
    async getVideoList() {
      const res = await ysPageListApi({
        pageNum: this.pageParams.pageNum,
        pageSize: 9,
      })
      this.videoList = res.data.ysVideoDeviceInfoList
      this.videoTotal = res.data.total
      this.getVideo(res.data.ysVideoDeviceInfoList[0].deviceSerial)
      this.activeItem = res.data.ysVideoDeviceInfoList[0].deviceSerial
    },
    seeItem(item) {
      this.activeItem = item.deviceSerial
      if (flvPlayer2) {
        flvPlayer2.destroy()
        flvPlayer2 = null
      }
      this.getVideo(item.deviceSerial)
    },
    currentPage(e) {
      // console.log(e);
      this.pageParams.pageNum = e
      this.getVideoList()
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.problemDialog {
  background-image: url('@/assets/index/色相／饱和度 1 拷贝.png');
  width: 1080px;
  height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 60px 10px 30px 60px !important;
  .dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    padding-right: 20px;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  .dialogForm {
    display: flex;
    margin-top: 20px;
    input::placeholder {
      color: #e8f0ef; /* 你可以根据需要修改颜色值 */
      opacity: 1; /* 有些浏览器默认placeholder的透明度较低，可以设置为1使其不透明 */
    }
    input {
      color: #fff !important; /* 你可以根据需要修改颜色值 */
    }
    .el-input {
      width: 240px;
      margin-right: 24px;
    }
    ::v-deep .el-input__inner {
      background-color: transparent !important;
      border-radius: 4px;
      border: 1px solid #3f5b56;
      width: 240px;
      color: #fff !important;
    }
    /* 为 .custom-time-picker 类添加的 .el-date-editor 元素设置背景色和边框 */
    .custom-time-picker {
      background-color: transparent !important; /* 设置背景颜色 */
      border: 1px solid #3f5b56;

      ::v-deep .el-range-input {
        background-color: transparent !important; /* 设置背景颜色 */
      }
    }
    .selectBox {
      width: 200px;
      margin: 0 24px;
      ::v-deep .el-input__inner {
        background-color: transparent !important;
        border-radius: 4px;
        border: 1px solid #3f5b56;
        width: 200px;
        color: #fff !important;
      }
    }
    .searchBtn {
      background-color: #008870;
      color: #fff;
      border: 1px solid #008870;
    }
    .resetBtn {
      background-color: transparent;
      color: #fff;
      border: 1px solid #3f5b56;
    }
  }
}
.videoBox {
  display: flex;
  width: 100%;
  height: 600px;
  padding-top: 10px;
  .leftBox {
    width: 75%;
    #videoElement2 {
      width: 100%;
      height: 100%;
    }
  }
  .rightBox {
    width: 25%;
    background-color: #172625;
    .videoList {
      padding: 5px;
      box-sizing: border-box;
      // text-align: center;
      .videoItem {
        // width: 260px;
        height: 48px;
        background: rgba(19, 32, 31, 0.8);
        border-radius: 8px;
        border: 1px solid #2d514f;
        color: #fff;
        line-height: 48px;
        padding-left: 20px;
        cursor: pointer;
      }
      .activeItem {
        background-image: url('@/assets/矩形 68 拷贝.png');
        // background-color: #fff;
        background-size: cover;
        border: none;
      }
    }
    .pageBox {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
